import { useState, useCallback, useEffect } from "react";
import "../styles/arrow-button.scss";

export default function RoomArrow(props) {
  const { COUNT, handleRoomNum } = props;

  const [Num, setNum] = useState(2);

  const handleNum = useCallback(
    (direction, COUNT) => {
      if (direction === "LEFT") {
        Num === 0 ? setNum(COUNT - 1) : setNum((Num) => Num - 1);
      } else {
        Num === COUNT - 1 ? setNum(0) : setNum((Num) => Num + 1);
      }
      handleRoomNum(Num);
    },
    [Num, handleRoomNum]
  );

  useEffect(() => {
    handleRoomNum(Num);
  }, [Num, handleRoomNum]);

  return (
    <div className="room-arrow">
      <button onClick={() => handleNum("LEFT", COUNT)} class="arrow-button left">
        {"<"}
      </button>
      <button onClick={() => handleNum("RIGHT", COUNT)} class="arrow-button right">
        {">"}
      </button>
    </div>
  );
}
